<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			  /*外层容器*/
			  .my-special-label{
			    position: absolute;
			    right: 0
			  }
			  /*内层容器*/
			  .my-special-label > div {
			    width: 80px;
			    height: 60px;
			    overflow: hidden;
			    position: relative;
			    top: -18px;
			    right: 10px;
			  }
			  /*小横标*/
			  .my-special-label > div > div{
			    font: bold 12px Sans-Serif;
			    text-align: center;
			    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
			    transform: rotate(45deg);
			    position: relative;
			    padding: 0px;
			    left: 17px;
			    top: 15px;
			    width: 80px;
			    background-color: #e47b7b;
			    background-image: linear-gradient(to top, #fd5656, #d60101);
			    color: #f7f7f7;
			    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
			  }
			  /*折叠角*/
			  .my-special-label > div > div:before {
			    left: 0;
			  }
			  .my-special-label > div > div:after {
			    right: 0;
			  }
			  .my-special-label > div > div:before, .my-special-label > div > div:after {
			    content: "";
			    border-top: 1px solid #c5053f;
			    border-left: 1px solid transparent;
			    border-right: 1px solid transparent;
			    position: absolute;
			    bottom: -1px;
			  }
		</style>
	</head>
	<body>
		<div style="width: 100px;height: 100px;margin: 0 auto;">
			<div class="my-special-label">
			  <div>
			    <div>人事变动</div>
			  </div>
			</div>
		</div>
	</body>
</html>
